<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/dayjs.min.js"></script>
    <script src="js/jquery-1.11.0.min.js"></script>
    <script src="js/jquery-3.3.1.js"></script>
    <script src="js/getParameter.js"></script>
    <style>
        *{
            margin: 0px;
            padding: 0px;
        }
        input,textarea{
            outline: none;
        }
        #title{
            width: 100%;
            height: 8vh;
            font-size: 2rem;
            border:3px solid #6cdbeb;
        }
        input[type="button"]{
            background: linear-gradient(to right top, #65dfc9, #6cdbeb);
            position:absolute;
            top: 0;
            left: 100%;
            margin-top: 1.5vh;
            margin-left: -120px;
            width: 100px;
            padding:15px 0px ;
            border-radius: 5rem;
            border: none;
            outline: none;
            transition: all 85ms linear;
        }
        textarea{
            font-size: 1rem;
            border:3px solid #6cdbeb;
            width: 100%;
            height: 80vh;
            font-family: "微软雅黑";
        }
        ul{
            list-style: none;
            display: flex;
        }
        ul li{
            margin: 20px 10px;
        }
        label{
            background: linear-gradient(to right top, #65dfc9, #6cdbeb);
            border-radius: 5rem;
            padding: 10px 20px;
        }
        input[type="radio"]{
            appearance: none;
            -webkit-appearance: none;
            outline: none;
        }
        input[type="button"]:hover{
            box-shadow: 6px 6px 20px rgb(142, 165, 240, 0.8);
        }
    </style>
</head>
<body>
<form action="">
    <input placeholder="请输入你的标题..." type="text" name="title" id="title">
    <div id="type">
        <ul id="typeUl">
        </ul>
    </div>
    <textarea  rows="30" cols="40" name="content"></textarea>
</form>

<input type="button" id="release" name="" value="发布" >
<script>
    $(function(){
        $.get("category/findAll",{},function (resp){

            var lis = '';

            for (var i = 0; i < resp.data.length; i++) {
                let t=resp.data[i].cname;
                var li = `<li><input type="radio" id="type${i}" name="type" onclick="typeColor()" value="${t}"><label id="s${i}" name="f" for="type${i}">${t}</label></li>`;
                lis += li;
            }
            $("#typeUl").html(lis);
        });

    });
    function type1(){
        const list= document.getElementsByName("type");
        const f=document.getElementsByName("f")
        console.log("list",list);
        console.log("for",f)
        for(let i=0;i<list.length;i++){
            if(list[i].checked==1){
                console.log(f[i].innerText);
                return f[i].innerText;
            }
        }
    }
    function typeColor(){
        const list= document.getElementsByName("type");
        const f=document.getElementsByName("f");

        for(let i=0;i<list.length;i++){
            if(list[i].checked==1){
                console.log(i);
                document.getElementById(`s${i}`).style.background="#2baad6";
            }else{
                document.getElementById(`s${i}`).style.background="linear-gradient(to right top, #65dfc9, #6cdbeb)";
            }
        }
        cid()
    }
    function cid(){
        const list= document.getElementsByName("type");
        const f=document.getElementsByName("f")
        console.log("list",list);
        console.log("for",f);

        for(var i=0;i<list.length;i++){
            if(list[i].checked==1){
                return i+1;
            }
        }
    }

    function nowTime(){
        return dayjs().format("YYYY-MM-DD HH:mm:ss");

    }
    //2021-06-08 20:05:04 指new Date
    $(function () {
        //当表单提交时，调用所有的校验方法
        $("#release").click(function () {
            let uid=getParameter("uid");
            let title=$(" input[ type='text' ] ").val();
            let content=$(" textarea ").val();
            let type=type1();
            let cid1=cid();
            let release_time=nowTime();
            $.post("release/tijiao", {uid:uid,title:title,content:content,type:type,cid:cid1,release_time:release_time}, function (data) {
                //处理服务器响应的数据  data  {flag:true,errorMsg:"注册失败"}

                if (data.msg == "发布成功") {
                    alert("发布成功")
                    setTimeout(`location.href = "index.html"`, 500)
                } else {
                    //注册失败,给errorMsg添加提示信息
                    alert(data.msg + "!");

                }
            });
        });
    });




</script>
</body>
</html>